<template>
  <view class="page-index">
    <!-- 步骤条 -->
    <view class="steps-box">
      <u-steps :current="current" active-color="#fff" inactive-color="#999">
        <u-steps-item v-for="(item, index) in steps" :title="item.title" :desc="item.desc" contentStyle="contentStyle"/>
      </u-steps>
    </view>

    <!-- 工单状态更新记录 -->
    <view class="order-status">
      <view class="status-item" v-for="(log, index) in orderLogs" :key="index">
        <view class="log-item">
          <view class="dot"></view>
          <view class="log-name">{{ log.name }}</view>
          <view class="log-time">{{ log.time }}</view>
        </view>
        <view class="log-desc">{{ log.desc }}</view>
      </view>
      <view class="view-all" @click="viewAllLogs">查看全部进度 ></view>
    </view>

    <!-- 服务标准与收费标准 -->
    <view class="service-standards">
      <view class="standard-item">
        <image class="standard-icon" src="https://placehold.co/58x68" mode="aspectFit"></image>
        <view class="standard-content">
          <text class="standard-title">服务标准</text>
          <text class="standard-desc">服务体验标准化</text>
        </view>
      </view>
      <view class="standard-item">
        <image class="standard-icon" src="https://placehold.co/58x68" mode="aspectFit"></image>
        <view class="standard-content">
          <text class="standard-title">收费标准</text>
          <text class="standard-desc">收费透明简单化</text>
        </view>
      </view>
    </view>

    <!-- 网点信息 -->
    <view class="network-point">
      <view class="point-info">
        <view class="point-label-name">
          <view class="point-label">网点</view>
          <text class="point-name">{{ networkPoint.name }}</text>
        </view>
        <text class="point-address">{{ networkPoint.address }}</text>
      </view>
      <button class="contact-btn" @click="contactPoint">
        <image class="contact-icon" src="@/static/icons/phone.png" mode="aspectFit"></image>
        <view class="contact-text">联系网点</view>
      </button>
    </view>

    <!-- 产品清单 -->
    <view class="product-list">
      <view class="list-title">产品清单</view>
      <view class="product-item" v-for="(product, index) in products" :key="index">
        <image :src="product.image" mode="aspectFit"></image>
        <text>{{ product.name }}</text>
        <text>x {{ product.quantity }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-title">订单信息</view>
      <view class="info-detail">
        <text>服务工单：</text>
        <text>{{ orderInfo.workOrder }}</text>
        <button class="copy-btn" @click="copyWorkOrder(orderInfo.workOrder)">复制</button>
      </view>
      <view class="info-detail">
        <text>下单时间：</text>
        <text>{{ orderInfo.orderTime }}</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="cancel-btn" @click="cancelService">取消服务</button>
      <button class="supplement-btn" @click="supplementInfo">补充信息</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "order_info_index",
  data() {
    return {
      current: 1,
      steps: [
        {title: "工单接入", desc: "下单成功"},
        {title: "工程师到达", desc: ""},
        {title: "服务完成", desc: ""}
      ],
      orderLogs: [
        {
          name: "下单完成",
          time: "05-09 10:55",
          desc: "工单创建成功。创建渠道【美的小程序】"
        }
      ],
      networkPoint: {
        name: "天津市美捷机电设备安装工程有限公司",
        address: "天津市西青区中北镇兴宁路恒升仓储斜对面货场库房区1-5美的"
      },
      products: [
        {
          image: "https://placehold.co/60x60",
          name: "安装 美的壁挂式空调",
          quantity: 1
        }
      ],
      orderInfo: {
        workOrder: "FW250502529260",
        orderTime: "2025-05-09 10:55:00"
      }
    };
  },
  methods: {
    viewAllLogs() {
      // 查看全部进度逻辑
    },
    contactPoint() {
      // 联系网点逻辑
    },
    /**
     * 复制工单号逻辑
     * @param res
     */
    copyWorkOrder(res) {
      if (res) {
        uni.setClipboardData({
          data: res,
          success: () => {
            this.copiedText = '复制成功';
            // 可以在这里添加更多的成功处理逻辑，比如显示一个Toast提示
            uni.showToast({
              title: '复制成功',
              icon: 'success'
            });
          },
          fail: (err) => {
            this.copiedText = '复制失败';
            // 可以在这里添加失败处理逻辑
            console.error('复制失败', err);
          }
        });
      } else {
        uni.showToast({
          title: '工单号不存在',
          icon: 'none'
        });
      }
    },
    cancelService() {
      // 取消服务逻辑
    },
    supplementInfo() {
      // 补充信息逻辑
    }
  }
};
</script>

<style lang="scss">
.page-index {
  padding: 20rpx;
  background: linear-gradient(180deg, #007aff, #f5f5f5); // 从浅蓝色到浅灰色的渐变

  .steps-box {
    margin-top: 20rpx;
    padding: 20rpx;
    border-radius: 10rpx;

    :global(.u-steps__item--horizontal) {
      flex: 1;
      text-align: center;
    }

    :global(.u-steps__title) {
      font-size: 32rpx;
      color: #333;
    }

    :global(.u-steps__desc) {
      font-size: 24rpx;
      color: #666;
    }

    :global(.u-steps__line) {
      background-color: #ddd;
    }

    :global(.u-steps__line--active) {
      background-color: #007aff;
    }

    :global(.u-steps__dot) {
      width: 20rpx;
      height: 20rpx;
      background-color: #ddd;
    }

    :global(.u-steps__dot--active) {
      background-color: #007aff;
    }
  }

  .order-status {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;

    .status-item {
      align-items: center;
      margin-bottom: 10rpx;

      .log-item{
        display: flex;
        width: 100%;

        .dot {
          width: 10rpx;
          height: 10rpx;
          background-color: #007aff;
          border-radius: 50%;
          margin-right: 10rpx;
          margin-top: 12rpx;
          line-height: 32rpx;
        }
        .log-name{
          color: #007aff;
          font-size: 34rpx;
          margin-right: 10rpx;
          line-height: 34rpx;
        }
        .log-time {
          color: #007aff;
          margin-right: 10rpx;
          font-size: 28rpx;
          line-height: 34rpx;
        }
      }


      .log-desc {
        color: #333;
        font-size: 24rpx;
        margin-left: 20rpx;
        margin-top: 8rpx;
      }
    }

    .view-all {
      text-align: center;
      color: $u-info;
      margin-top: 40rpx;
      font-size: 23rpx;
    }
  }

  .service-standards {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;

    .standard-item {
      display: flex;
      align-items: center;
      width: 50%;

      .standard-icon {
        width: 50rpx;
        height: 68rpx;
        margin-right: 20rpx;
        margin-left: 37rpx;
      }

      .standard-content {
        display: flex;
        flex-direction: column;

        .standard-title {
          font-size: 32rpx;
          color: #333;
          font-weight: bold; // 加粗标题
        }

        .standard-desc {
          font-size: 24rpx;
          color: #666;
          margin-top: 5rpx; // 标题和描述之间的间距
        }
      }
    }
  }

  .network-point {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;

    .point-info {
      display: flex;
      flex-direction: column;

      .point-label-name {
        display: flex;
        align-items: baseline;
        margin-bottom: 10rpx;

        .point-label {
          width: 58rpx;
          height: 35rpx;
          background-color: #494848;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          margin-right: 10rpx;
          line-height: 35rpx;
          border-radius: 5rpx;
        }

        .point-name {
          font-size: 32rpx;
          color: #333;
          font-weight: bold; // 加粗显示
          line-height: 35rpx;
        }
      }

      .point-address {
        font-size: 22rpx;
        color: #939191;
      }
    }

    .contact-btn {
      border: none;
      width: 106rpx;
      height: 100%;
      margin: 0 8rpx;

      .contact-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 5rpx;
      }

      .contact-text {
        font-size: 22rpx;
        color: #007aff;
      }
    }
  }

  .product-list {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;

    .list-title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: bold;
    }

    .product-item {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 10rpx;
      }

      text {
        font-size: 28rpx;
        color: #333;
      }

      text:nth-child(3) {
        margin-left: auto;
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .order-info {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;

    .info-title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: bold;
    }

    .info-detail {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      text {
        font-size: 28rpx;
        color: #333;
      }

      text:nth-child(2) {
        margin-left: 10rpx;
      }

      .copy-btn {
        margin-left: 20rpx;
        background-color: #f0f0f0;
        color: #333;
        border-radius: 10rpx;
        padding: 5rpx 10rpx;
        font-size: 24rpx;
      }
    }
  }

  .bottom-buttons {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 152rpx;
    box-shadow: 0rpx -2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
    z-index: 99;
    padding-left: 164rpx;
    padding-top: 22rpx;
    padding-right: 20rpx;

    button {
      flex: 1 1 35%;
      text-align: center;
      margin: 4rpx 10rpx;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 30rpx;
      line-height: 84rpx;
      width: 30%;
    }

    .cancel-btn {
      background-color: #fff;
      color: #007aff;
      border: 2rpx solid #007aff;
    }

    .supplement-btn {
      background-color: #007aff;
      color: #fff;
    }
  }
}
</style>